import { useState, useTransition } from "react";
import SearchResults from "./SearchResults";

export default function App() {
  const [isPendint, startTransition] = useTransition();

  // query 用于搜索框
  const [query, setQuery] = useState("");
  const [queryTwo, setQueryTwo] = useState("");

  function onChange(event) {
    const value = event.target.value;
    // 将 input 框的更新立刻执行
    setQuery(value);

    startTransition(() => {
      // 让 SearchResults 过渡更新
      setQueryTwo(value);
    });
  }

  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={onChange} />
      </label>

      <SearchResults query={queryTwo} />
    </>
  );
}

/**
 * 一：没有使用 useTransition
 *
 *   1. 输入框输入时，修改了 query ，引起 App 组件的 重新 render
 *   2. SearchResults 也跟着重新 render 。它内部有 1秒的 延迟，导致整个 App 渲染出来需要 1秒
 *   3. 影响了 input 的快速响应。带来的问题是，输入框卡顿。
 *
 * 二、使用 useTransition
 *
 *   1. 提供两个不同的状态数据，分别是 query 与 queryTwo
 *   2. query 给到 input 元素。 queryTwo 给到 SearchResults 组件
 *   3. 输入框输入 123 时，立刻修改了 query ，将 queryTwo 的修改标记为了 过渡任务
 *      query = 123
 *      queryTwo = ''
 *      SearchResults 收到的 query 是 ’‘， 直接返回一个 null, 没有延迟，不影响 input
 *
 *   4. 借着输入 456 ,立刻修改了 query ，将 queryTwo 的修改标记为了 过渡任务
 *      query = 123456
 *      queryTwo = 123
 *      SearchResults 收到的 query 是 123 不为 '', 有走了延迟，影响到了 input
 *
 * 三、使用 useTransition + memo
 *
 *    使用 memo 对 SearchResults 做包裹，主要影响上面的第四点
 *
 *    4. 借着输入 456 ,立刻修改了 query ，将 queryTwo 的修改标记为了 过渡任务
 *      query = 123456
 *      queryTwo = 123
 *      SearchResults 收到的 query 是 123 , 上一次也是 123 ，没有变化不重新render，就不会影响到 input
 */
